<template>
  <div>
    <!-- <v-tinymce></v-tinymce> -->
    <Editor :content="content" ref="editor"></Editor>
    <div class="btn-wrap">
      <el-button type="primary" @click="copyContent">Copy Content.</el-button>
    </div>
    <el-input v-model="copyVal" placeholder=""></el-input>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
import Editor from '@/components/ImcoderTinymce/index.vue'
@Component({
  components: {
    Editor,
  },
})
export default class Tinymce extends Vue {
  public content: string = '<h1 style="text-align: center;">News Title.</h1>'
  public copyVal: string = ''
  public setting: object = {
    menubar: false,
    toolbar:
      'undo redo | fullscreen | formatselect alignleft aligncenter alignright alignjustify | link unlink | numlist bullist | image media table | fontselect fontsizeselect forecolor backcolor | bold italic underline strikethrough | indent outdent | superscript subscript | removeformat |',
    toolbar_drawer: 'sliding',
    quickbars_selection_toolbar:
      'removeformat | bold italic underline strikethrough | fontsizeselect forecolor backcolor',
    plugins: 'link image media table lists fullscreen quickbars',
    language: 'zh_CN',
    height: 350,
  }
  public copyContent(): void {
    this.copyVal = this.content
  }
}
</script>

<style lang="scss" scoped>
.btn-wrap {
  padding: 5px 0;
  text-align: right;
}
</style>
